$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;

  .container {
    position: relative;
    padding-bottom: 6vw;
    .fbg{
      position: absolute;
      right:0;
      bottom: 0;
      z-index: -1;
      img{
        width: 1377/$f+vw;
        max-width: 100%;
        object-fit: contain;
      }
    }
    .banner {
      width: 100%;
      position: relative;

      &::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: linear-gradient(110deg, #C9DBEC 0.46%, #C8D7EA 11.4%, rgba(225, 236, 249, 0.96) 34.4%, rgba(234, 245, 255, 0.86) 46.39%, rgba(234, 245, 255, 0.31) 61.38%, rgba(234, 245, 255, 0.00) 88.26%);
      }

      .bg {
        img {
          width: 100%;
          display: block;
          object-fit: cover;
        }
      }

      .text {
        position: absolute;
        left: 10vw;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;

        .p1 {
          color: #030303;
          font-size: $fontSize_54;
          font-weight: bold;
          display: flex;
          align-items: flex-start;

          svg {
            width: 21/$f+vw;
            display: block;
            margin: 0.7vw 0 0 0.7vw;
          }
        }

        .p2 {
          color: #464646;
          font-size: $fontSize_36;
          margin-top: 0.6vw;
            font-family: 'SourceHanSansCN-Light';;
        }
      }
    }

    .main {
      .section1{
        .txt{
          margin-left: 35vw;
          .des{
            padding: 5vw 10vw 0 3vw;
            color: #464646;
            font-size: $fontSize_22;
            line-height: 1.7;
              font-family: 'SourceHanSansCN-Light';;
          }
        }
      }
      .section2{
        display: flex;
        justify-content: space-between;
        margin: 8vw 0;
        .l{
          width: 35vw;
          img{
            width: 100%;
            display: block;
            object-fit: cover;
          }
        }
        .r{
          width: calc(100% - 35vw);
          background-color: rgba(225, 225, 225, .2);
          .box{
            padding: 0 10vw 0 3vw;
            position: relative;
            .t{
              color: #000;
              font-size: $fontSize_54;
              font-weight: 600;
              margin: 4vw 0 2vw 0;
            }
            .des{
              color: #464646;
              font-size: $fontSize_28;
              line-height: 1.5;
            }
            .applications{
              transform: translateY(6vw);
              .d1{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .pt{
                  position: relative;
                  width: fit-content;
                  font-size: $fontSize_36;
                  font-weight: 600;
                  padding-bottom: 1vw;
                  &::before{
                    content:'';
                    display: block;
                    position: absolute;
                    left: 0;
                    width:30%;
                    height: 5/$f+vw;
                    bottom:0;
                    background-color: rgba(0, 166, 229, 1);
                    transition: all 600ms;
                  }
                  &::after{
                    content:'';
                    display: block;
                    position: absolute;
                    left:30%;
                    width: 15%;
                    height: 5/$f+vw;
                    bottom:0;
                    background-color: rgba(0, 96, 176, 1);
                    transition: all 600ms;
                  }
                }
                .btns{
                  display: flex;
                  .prev,.next{
                    cursor: pointer;
                    svg{
                      display: block;
                      width: 36/$f+vw;
                       path,circle{
                        stroke:rgba(38, 43, 47, .3);
                        transition: all 600ms;
                       }
                    }
                    &:hover{
                      svg{
                        path,circle{
                          stroke:rgba(0, 96, 176, 1);
                        }
                      }
                    }
                  }
                  .next{
                    margin-left: 0.6vw;
                  }
                }
              }
              .pics{
                margin-top: 3vw;
                .swiper-container{
                  .pic{
                    img{
                      width: 100%;
                      display: block;
                      object-fit: cover;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .section3{
        .box{
          margin-left: 35vw;
          .related{
            padding: 5vw 10vw 0 3vw;
            color: #464646;
            font-size: $fontSize_22;
            line-height: 1.7;
            .d1{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .pt{
                position: relative;
                width: fit-content;
                font-size: $fontSize_36;
                font-weight: 600;
                padding-bottom: 1vw;
                &::before{
                  content:'';
                  display: block;
                  position: absolute;
                  left: 0;
                  width:50%;
                  height: 5/$f+vw;
                  bottom:0;
                  background-color: rgba(0, 166, 229, 1);
                  transition: all 600ms;
                }
                &::after{
                  content:'';
                  display: block;
                  position: absolute;
                  left:50%;
                  width: 25%;
                  height: 5/$f+vw;
                  bottom:0;
                  background-color: rgba(0, 96, 176, 1);
                  transition: all 600ms;
                }
              }
              .btns{
                display: flex;
                .prev,.next{
                  cursor: pointer;
                  svg{
                    display: block;
                    width: 36/$f+vw;
                     path,circle{
                      stroke:rgba(38, 43, 47, .3);
                      transition: all 600ms;
                     }
                  }
                  &:hover{
                    svg{
                      path,circle{
                        stroke:rgba(0, 96, 176, 1);
                      }
                    }
                  }
                }
                .next{
                  margin-left: 0.6vw;
                }
              }
            }
            .pros{
              margin: 3vw 0;
              .swiper-container{
                a{
                  display: block;
                  .pic{
                    background-color: rgba(228, 240, 255, .4);
                    img{
                      width: 100%;
                      display: block;
                      object-fit: cover;
                    }
                  }
                  .des{
                    color: #000;
                    font-size: $fontSize_16;
                    width: 80%;
                    line-height: 1.5;
                    margin-top: 2vw;
                      p{
                        font-family: 'SourceHanSansCN-Light';
                      }
                  }
                }
              }
            }
          }
        }
      }
    }
  }



  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .container{
      .banner{
        .bg{
          img{
            height: 150px;
          }
        }
        .text{
          left: 5%;
          .p1{
            font-size:24px;
            svg{
              width: 10px;
            }
          }
          .p2{
            font-size: 18px;
          }
        }
      }
      .main{
        .section1{
          margin: 20px 5%;
          .txt{
            margin-left: 0;
            .des{
              padding: 0;
              font-size: 16px;
              line-height: 1.5;
            }
          }
        }
        .section2{
          flex-direction: column;
          margin: 30px 0;
          .l{
            width: 100%;
            img{
              height: 200px;
            }
          }
          .r{
            width: 100%;
            .box{
              padding: 20px 5%;
              .t{
                font-size: 18px;
                margin: 0 0 10px 0;
              }
              .des{
                font-size: 14px;
                line-height: 1.8;
              }
              .applications{
                transform: translateY(0);
                margin-top: 30px;
                .d1{
                  margin: 10px 0;
                  .pt{
                    font-size: 18px;
                    padding-bottom: 10px;
                    &::before,&::after{
                      height: 3px;
                    }
                  }
                  .btns{
                    .prev,.next{
                      svg{
                        width: 24px;
                      }
                    }
                    .next{
                      margin-left: 10px;
                    }
                  }
                }
                .pics{
                  margin-top: 20px;
                }
              }
            }
          }
        }
        .section3{
          .box{
            margin-left: 5%;
            .related{
              padding: 0;
              .d1{
                margin: 10px 5% 0 0;
                .pt{
                  font-size: 18px;
                  padding-bottom: 10px;
                  &::before,&::after{
                    height: 3px;
                  }
                }
                .btns{
                  .prev,.next{
                    svg{
                      width: 24px;
                    }
                  }
                  .next{
                    margin-left: 10px;
                  }
                }
              }
              .pros{
                margin: 30px 0;
                .swiper-container{
                  a{
                    .des{
                      width: 90%;
                      font-size: 14px;
                      margin-top: 20px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}